<template>
	<view class="workbench" :class="APPTheme">
		<view class="status_bar"></view>
		<uni-nav-bar fixed title="工作台" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'"></uni-nav-bar>
		<view class="center">
			<view class="list">
			   <view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="item-title" @click="item.isRotate=!item.isRotate"><text>{{item.name}}</text><view class="iconfont icon-jiantou" :class="{animated:item.isRotate}"></view></view>
					<view class="item-center " :class="{'theme-bg':item.isRotate}" @click="rotateFn(item)">
						<view class="center-items theme-bg-active" v-for="(item2,index2) in item.list" :key="index2" @click="navigetFn(item2,item)">
							<view class="items-top" :style="{backgroundColor:item2.color}">
								<i class="iconfont" :class="item2.icon"></i>
							</view>
							<view class="items-bottom">
								{{item2.name}}
							</view>
						</view>
					</view>
			   </view>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components:{},
		data() {
			return {
				list:[{
					name:'办公通讯',
					isRotate:false,
					list:[{
						icon:'icon-youjiankaobei',
						color:'#0088fe',
						name:'量子邮件'
					},
					{
						icon:'icon-jiantou',
						color:'#15bc84',
						name:'串口调试'
					}
					]
				}],
				
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		onLoad() {
			that = this
		},
		onShow() {
		},
		methods: {
			//收起
			rotateFn(item){
				console.log(item);
				if(item.isRotate){
					item.isRotate=false
				}
				
			},
			//点击某一项
			navigetFn(item2,item){
				if(item.isRotate){
					return
				}
				if(item2.name=='量子邮件'){
					uni.navigateTo({url: '../workbench/email/email'});
				}else if(item2.name=='串口调试'){
					uni.navigateTo({url: '/pages/template/serialPortDebug/serialPortDebug'});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.workbench{
		height: 100%;
		.center{
			padding: 10px;box-sizing: border-box;
			.list{
				.list-item{
					.item-title{
						font-size: $font_size-16;margin-bottom: 10px;display: flex;
						.icon-jiantou{
							transition: all 0.5s;transform: rotate(0);display: flex;align-items: center;
						}
						.animated{
							transform: rotate(-90deg);
						}
					}
					.item-center{
						display: flex;flex-wrap: wrap;
						.center-items{
							width: 24%;display: flex;flex-direction: column; justify-content: center;align-items: center;border-radius: 10px;
							.items-top{
								border-radius: 15px; width: 40px;height: 40px;color: #FFF1EE;display: flex;justify-content: center;align-items: center;
								.iconfont{
									font-size: 18px;
								}
							}
							.items-bottom{
								font-size: $font_size-12;line-height: 30px;
							}
						}
						.center-items:active{
							background-color: $bg-active-light;
						}
					}
					.theme-bg{
						flex-wrap: nowrap;overflow: hidden;padding: 10px;background-color: #f0f0f0;border-radius: 10px;box-sizing: border-box;
						.center-items{
							margin-right: 22rpx;width:30px;
							.items-top{
								width: 30px;height:30px;border-radius:10px;
								.iconfont{
									font-size: 12px;
								}
							}
						}
						.center-items:active{
						}
						.items-bottom{
							display: none;
						}
					}
				}
			}
		}
	}
</style>
